layui.config({
  version: '1551352891272' //为了更新 js 缓存，可忽略
});
layui.use(['form', 'laydate', 'laypage', 'table', 'element', 'layer'], function () {
  var laydate = layui.laydate,
    form = layui.form,
    laypage = layui.laypage, //分页
    table = layui.table, //表格
    element = layui.element, //元素操作
    layer = layui.layer
  //日期
  laydate.render({
    elem: '#date1'
  });

  laydate.render({
    elem: '#date2'
  });

  //执行一个 table 实例
  table.render({
    elem: '#demo',
    height: 420,
    url: 'layui/fldata.json', //数据接口
    toolbar: '#toolbarDemo', //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
    title: '高级列表',
    page: true, //开启分页
    text: {
      none: '暂无相关数据' //默认：无数据
    },
    cols: [
      [ //表头
        {
          field: 'pro_code',
          title: '项目编码',
          width: 200,
          align: 'center',
          sort: true,
          fixed: 'left',
          hide: true
        }, {
          field: 'pro_name',
          title: '项目名称',
          width: 150,
          align: 'center',
          sort: true,
          fixed: 'left',
          templet: '#titleTpl'
        }, {
          field: 'company_code',
          title: '归属公司',
          width: 150,
          align: 'center',
        }, {
          field: 'dep_code',
          title: '归属部门',
          width: 150,
          align: 'center',
        }, {
          field: 'pro_type',
          title: '项目类型',
          width: 100,
          sort: true,
          align: 'center',
        }, {
          field: 'pro_phase',
          title: '项目阶段',
          width: 100,
          sort: true,
          align: 'center',
        }, {
          field: 'pro_status',
          title: '项目状态',
          width: 100,
          sort: true,
          align: 'center',
        }, {
          field: 'pro_pmp',
          title: '项目经理',
          width: 90,
          align: 'center',
        }, {
          field: 'pro_customer',
          title: '客户名称',
          width: 150,
          align: 'center',
        }, {
          field: 'process_code',
          title: '流程编码',
          width: 150,
          sort: true,
          align: 'center',
        }, {
          field: 'process_type',
          title: '流程类型',
          width: 100,
          sort: true,
          align: 'center',
        }, {
          field: 'cost_type',
          title: '费用详细分类',
          width: 130,
          sort: true,
          align: 'center',
        }, {
          field: 'process_status',
          title: '流程状态',
          width: 100,
          sort: true,
          align: 'center',
        }, {
          field: 'income',
          title: '收入',
          width: 150,
          sort: true,
          align: 'center',
          templet: '#income'
        }, {
          field: 'spending',
          title: '支出',
          width: 150,
          sort: true,
          align: 'center',
          templet: '#spending'
        }, {
          field: 'payment_day',
          title: '付款日期',
          width: 130,
          sort: true,
          align: 'center',
        }, {
          field: 'real_payment_day',
          title: '实际付款日期',
          width: 130,
          sort: true,
          align: 'center',
        }, {
          field: 'reason',
          title: '报销理由',
          width: 300,
          align: 'left',
        }, {
          field: 'user_name',
          title: '提交人',
          width: 100,
          sort: true,
          align: 'center',
        }, {
          field: 'time',
          title: '提交时间',
          width: 130,
          sort: true,
          align: 'center',
        }, {
          fixed: 'right',
          title: '操作',
          width: 100,
          align: 'center',
          toolbar: '#barDemo'
        }
      ]
    ]
  });

  //分页
  laypage.render({
    elem: 'pageDemo', //分页容器的id
    count: 100, //总页数
    skin: '#1E9FFF', //自定义选中色值
    jump: function (obj, first) {
      if (!first) {
        layer.msg('第' + obj.curr + '页', {
          offset: 'b'
        });
      }
    }
  });

  //监听行工具事件
  table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data, //获得当前行数据
      layEvent = obj.event; //获得 lay-event 对应的值
    if (layEvent === 'detail') {
      // console.log(data)
      //tab层
      layer.tab({
        area: ['700px', '450px'],
        tab: [{
          title: '项目信息',
          content: `<div style="padding:15px;height:406px;overflow:auto;">
            <ul class="layui-timeline">
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">基本信息</h3>
                  <ul>
                    <li>项目编号：` + data.pro_code + `</li>
                    <li>项目名称：` + data.pro_name + `</li>
                    <li>归属公司：` + data.company_code + `</li>
                    <li>归属部门：` + data.dep_code + `</li>
                    <li>项目类型：` + data.pro_type + `</li>
                    <li>项目阶段：` + data.pro_phase + `</li>
                    <li>项目状态：` + data.pro_status + `</li>
                    <li>客户名称：` + data.pro_customer + `</li>
                  </ul>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">成员信息</h3>
                  <ul>
                    <li>项目经理：` + data.pro_pmp + `</li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
          `
        }, {
          title: '流程信息',
          content: `<div style="padding:15px;height:406px;overflow:auto;">
            <ul class="layui-timeline">
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">基本信息</h3>
                  <ul>
                    <li>流程编码：` + data.process_code + `</li>
                    <li>流程类型：` + data.process_type + `</li>
                    <li>流程状态：` + data.process_status + `</li>
                    <li>提交人：` + data.user_name + `</li>
                    <li>提交时间：` + data.time + `</li>
                  </ul>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">费用信息</h3>
                  <ul>
                    <li>费用分类：` + data.cost_type + `</li>
                    <li>收入：` + data.income + `</li>
                    <li>支出：` + data.spending + `</li>
                    <li>付款日期：` + data.payment_day + `</li>
                    <li>实际付款日期：` + data.real_payment_day + `</li>
                  </ul>
                </div>
              </li>
              <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                  <h3 class="layui-timeline-title">其他信息</h3>
                  <ul>
                    <li>报销理由：` + data.reason + `</li>
                  </ul>
                </div>
              </li>
            </ul>  
          </div>`
        }]
      });
    }
  });

});